<!--商品参数选择框组件-->
<template>
    <ul id="prod-choice">
        <slot class="prod-title"></slot>
        <br>
        <li class="prod-box" :class="{active: index == selectedItem}" @click="changeSelected(index, item.uid)" v-for="(item, index) in choiceList" :key="index">
            <a v-if="itemId == 1" >{{item.prodVersion}}</a>
            <a v-if="itemId == 2">{{item.prod_color}}</a>
        </li>
    </ul>
</template>

<script>
export default {
    name: "ProdChoice",
    props: ['selected', 'titles', 'choices', 'itemId'],
    data(){
        return{
            prod_title: this.titles,
            choiceList: this.choices,
            // 被选中的型号的uid
            selectedItem: undefined,
            uid: 0
        }
    },
    methods:{
        changeSelected(index, uid){
            this.selectedItem = index;
            this.uid = uid;
            this.$emit("sendMessage", index);
        },
        updatePage(prodDetailList){
            this.choiceList = prodDetailList
        },
    },
}
</script>
<style scoped>

#prod-choice{
    text-align: left;
}

/*实现页面加载出来后, 默认选中第一个框*/
.prod-box{
    list-style: none;
    width: 286px;
    height: 42px;
    text-align: center;
    border: 1px #e0e0e0 solid;
    display: inline-block;
    margin:10px 12px 0 0;
}

.prod-box:hover{
    color: #FF6700;
    border: 1px #FF6700 solid;
}

.active{
    border: 1px #FF6700 solid;
}

.prod-box a{
    font-size: 16px;
    font-weight: 400;
    font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
    color: #757575;
    line-height: 42px;
    text-decoration: none;
}

</style>
